<template>
  <page-header-wrapper :title="false">
    <a-card
      title="合同回收站"
    >
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="输入合同编号"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务名称">
                <a-input v-model="queryParam['filter[tm_name]']" placeholder="输入商标名称"/>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="申请主体">
                  <a-input v-model="queryParam['filter[subject]']" placeholder="输入申请主体"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="联系电话">
                  <a-input v-model="queryParam['filter[phone1]']" placeholder="输入联系电话"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 5px" @click="() => this.queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="contract_content">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.contract_id"
          :columns="contractList"
          :data="contractData"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot="amount" slot-scope="text,record">
            <a-tag color="red">总金额：{{ text }}</a-tag>
            <a-tag color="red">代理费：{{ record.agency_fee }}</a-tag>
            <a-tag color="red">尾款：{{ record.tail_money }}</a-tag>
          </template>
          <!--          <template slot="tail_money" slot-scope="text">-->
          <!--            <a-tag color="red" v-text="text"></a-tag>-->
          <!--          </template>-->
          <!--          <template slot="agency_fee" slot-scope="text">-->
          <!--            <a-tag color="red" v-text="text"></a-tag>-->
          <!--          </template>-->
          <template slot="status" slot-scope="text, record">
            <a-button v-if="text == 34 || text == 44" type="primary" size="small" @click="editStatus(record.contract_id)">{{ statusOpts[text] }} <a-icon type="form" /></a-button>
            <a-button v-else-if="text == 32 || text == 42" type="danger" size="small" @click="editStatus(record.contract_id)">{{ statusOpts[text] }} <a-icon type="form" /></a-button>
            <a-button v-else type="default" size="small" @click="editStatus(record.contract_id)">{{ statusOpts[text] }} <a-icon type="form" /></a-button>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button type="primary" size="small" :style="{ marginRight: '5px' }" @click="getInvoice">查看</a-button>
            <a-button type="danger" size="small" @click="toDetail(record.contract_id)">恢复</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getList, getStatus, editStatus, delContract } from '@/api/contract'
import col from '@/columns/contract'

export default {
  components: {
    STable
  },
  name: 'ContractRecycle',
  data () {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      contractList: col.recycle,
      contractData: parameters => {
        return getList(Object.assign(parameters, this.queryParam, this.activeKey)).then(res => {
          this.contractTabs = res.result.tab_opts
          this.moneyOpts = res.result.has_tail_tail_money_opts
          this.statusOpts = res.result.status_opts
          this.typeOpts = res.result.contract_type_opts
          this.contractOpts = res.result.contract_type_opts
          return res.result
        })
      },
      visible: false,
      activeKey: 0,
      contractTabs: [],
      moneyOpts: [],
      typeOpts: [],
      statusOpts: [],
      contractOpts: [],
      advanced: true,
      queryParam: {},
      status: {},
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      contractVisible: false,
      dataSource: [],
      invoiceVisible: false,
      invoiceForm: {},
      headerOpts: {
        '1': '个人',
        '2': '企业'
      },
      companyOpts: {},
      invoiceRules1: {
        company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
        header_type: [{ required: true, message: '必须选择抬头类型', trigger: 'change' }],
        header: [{ required: true, message: '必须填写发票抬头', trigger: 'blur' }],
        invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }]
      },
      invoiceRules2: {
        company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
        header_type: [{ required: true, message: '必须选择抬头类型', trigger: 'change' }],
        header: [{ required: true, message: '必须填写发票抬头', trigger: 'blur' }],
        invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }],
        bank_name: [{ required: true, message: '必须填写开户行', trigger: 'blur' }],
        social_code: [{ required: true, message: '必须填写统一信用代码证', trigger: 'blur' }],
        account_num: [{ required: true, message: '必须填写银行账户', trigger: 'blur' }],
        register_address: [{ required: true, message: '必须填写地址', trigger: 'blur' }],
        register_phone: [{ required: true, message: '必须填写联系电话', trigger: 'blur' }]
      },
      inTypeOpts: {
        '1': '普通增值税发票',
        '2': '专用增值税发票'
      }
    }
  },
  methods: {
    onTabs (key) {
      const query = {}
      query['filter[tab]'] = key
      this.activeKey = query
      this.$refs.table.refresh(true)
    },
    toDetail (id) {
      this.$router.push({ name: 'ContractDetail', params: { cid: id } })
    },
    onDel (id) {
      delContract(id).then(res => {
        if (res.status === 0) {
          this.$refs.table.refresh()
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    editStatus (id) {
      const app = this
      app.status.contract_id = id
      getStatus(id).then(res => {
        if (res.status === 0) {
          app.status.items = res.result.items
          app.status.selection = (res.result.selection).toString()
          this.visible = true
        } else {
          app.$error({
            title: '警告',
            content: res.msg
          })
        }
      })
    },
    editSave () {
      const app = this
      editStatus(app.status.contract_id).then(res => {
        if (res.status === 0) {
          app.$refs.table.refresh()
          app.visible = false
        } else {
          app.$error({
            title: '警告',
            content: res.msg
          })
        }
      })
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    addContract () {
      this.contractVisible = true
    },
    onSearch () {
      this.dataSource = ['马婷', '马婷婷', '马婷婷1']
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters) {
      clearFilters()
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    getInvoice () {
      this.invoiceVisible = true
    }
  }
}
</script>

<style>

</style>
